<template>
	<view>
		<u-loading-page :loading="loadding" loading-mode="semicircle" loading-text="Hello Pro"></u-loading-page>
		<view v-if="!loadding" class="all-main">
			<u-sticky>
				<view class="search">
					<view class="lefts" @click="productSelect">
						<u-icon name="list-dot"></u-icon>
						<text>{{product_name}}</text>
					</view>
					<view class="rights">
						<u-search bgColor="#ffffff" placeholder="请输入终端系列号" @custom="search" @search="search"
							v-model="keyword"></u-search>
					</view>
				</view>
				<view class="utags">
					<u-tabs :list="tagData" :current="operateState" :scrollable="false" @change="tabsChange"></u-tabs>
				</view>
			</u-sticky>
			<view v-if="data !== undefined && data!== null && data.length>0" class="main">
				<view v-for="(item,index) in data" :key="index" class="item">
					<view class="left">
						<view class="titles">
							{{item.pname}}
						</view>
						<u-line></u-line>
						<view class="names">
							<u-icon name="account" size="16" color="#ff9900"></u-icon>
							<text v-if="operateState>0">{{item.name}}</text>
							<text v-else>未绑定</text>
						</view>
						<u-line dashed></u-line>
						<view class="sn">
							<u-icon name="calendar" size="16" color="#ff9900"></u-icon>
							<text>{{item.sn}}</text>
						</view>
						<u-line dashed></u-line>
						<view class="sn">
							<u-icon name="integral" size="16" color="#ff9900"></u-icon>
							<text>{{item.rate}}</text>
						</view>
						<u-line v-if="operateState>0" dashed></u-line>
						<view v-if="operateState>0" class="sn">
							<u-icon name="clock" size="16" color="#ff9900"></u-icon>
							<text>2023-12-7 17:46:47</text>
						</view>
						<u-line v-if="operateState == 2" dashed></u-line>
						<view v-if="operateState == 2" class="sn">
							<u-icon name="clock-fill" size="16" color="#ff9900"></u-icon>
							<text>2023-12-7 17:46:47</text>
						</view>
					</view>
				</view>
			</view>
			<u-empty v-else mode="list" icon="/static/Empty/data_null.png">
			</u-empty>
			<u-picker :show="show" :columns="columns" :closeOnClickOverlay="true" keyName="name" @confirm="confirmFun"
				@cancel="show = false" @close="show = false"></u-picker>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadding: true,
				bottom: true,
				show: false,
				data: [],
				keyword: '',
				rate_setting_id: '',
				product_id: '',
				product_name: '',
				userinfo: {},
				page: 1,
				page_size: 10,
				columns: [],
				tagData: [{
					name: '未绑定'
				}, {
					name: '已绑定'
				}, {
					name: '已激活'
				}],
				operateState: 0
			}
		},
		onLoad() {
			this.userinfo = uni.getStorageSync('userinfo')
			this.getTotalData()
			this.getProduct()
		},
		//下拉刷新
		onReachBottom() {
			if (this.bottom == true) {
				this.page++
				this.loadData()
			}
		},
		methods: {
			// 搜索
			search() {
				this.data = []
				this.page = 1
				this.bottom = true
				this.loadData()
			},
			// 加载统计数据
			async getTotalData() {
				const {
					data: res
				} = await this.$myHttp5({
					url: 'Terminal/getTotalData',
					data: {
						product_id: this.product_id,
						sn: this.keyword
					},
					header: {
						'token': this.userinfo.token
					}
				});
				if (res.code == 1) {
					this.tagData = res.data
				}
			},
			// 加载数据
			async loadData() {
				var that = this
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp5({
					url: 'Terminal/getMyTerminal',
					data: {
						product_id: that.product_id,
						sn: that.keyword,
						status: that.operateState,
						page: that.page,
						page_size: that.page_size
					},
					header: {
						'token': that.userinfo.token
					}
				});
				that.loadding = false
				uni.hideLoading()
				if (res.code == 1) {
					if (res.data !== undefined && res.data !== null && res.data.length >
						0) {
						if (this.page == 1) {
							this.data = res.data
						} else {
							this.data = [...this.data, ...res.data]
						}
						if (res.data.length < this.page_size) {
							this.bottom = false
						}
					} else {
						this.bottom = false
					}
				} else {
					this.bottom = false
				}
			},
			// 打开选择
			async productSelect() {
				this.show = true
			},
			// 确定选择分类
			confirmFun(e) {
				if (this.product_id != e.value[0].id) {
					this.product_id = e.value[0].id
					this.product_name = e.value[0].name
					this.data = []
					this.page = 1
					this.bottom = true
					this.operateState = 0
					this.getTotalData()
					this.loadData()
				}
				this.show = false
			},
			// 加载产品
			async getProduct() {
				const {
					data: res
				} = await this.$myHttp5({
					url: 'Prouduct/lists',
					header: {
						'token': this.userinfo.token
					}
				});
				if (res.code == 1) {
					this.columns = [res.data]
					this.product_id = res.data[0].id
					this.product_name = res.data[0].name
					this.loadData()
				}
			},
			// 操作选择
			tabsChange(e) {
				if (this.operateState != e.index) {
					this.operateState = e.index
					this.data = []
					this.page = 1
					this.bottom = true
					this.loadData()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f3f4f6;
	}

	.all-main {
		padding-bottom: 2rpx;

		.search {
			padding: 20rpx;
			background-color: #ffffff;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #f3f4f6;

			.lefts {
				display: flex;
				line-height: 66rpx;
				font-size: 28rpx;

				text {
					padding-left: 12rpx;
				}
			}

			.rights {
				width: 60%;
			}
		}
		
		.utags {
			background-color: #ffffff;
		}

		.main {
			margin: 20rpx 0;
			padding: 0 20rpx;

			.item {
				border-radius: 14rpx;
				background-color: #ffffff;
				padding: 10rpx 20rpx;
				margin-bottom: 20rpx;
				
				.titles {
					font-size: 28rpx;
					font-weight: bold;
					padding: 10rpx 0;
				}

				.left {
					.sn {
						padding: 10rpx 0;
						font-size: 24rpx;
						display: flex;
						text {
							padding-left: 10rpx;
						}
					}

					.names {
						padding: 10rpx 0;
						font-weight: bold;
						font-size: 28rpx;
						color: #909399;
						display: flex;
						text {
							padding-left: 10rpx;
						}
					}
				}

				.right {
					display: flex;
					justify-items: center;
				}
			}
		}
	}
</style>